<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="js/jquery-1.12.2.min.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="layui/css/mycss.css">
</head>

<body>
<div class="wrap">
    <!--    <img src="https://zeroone-bucket.oss-cn-beijing.aliyuncs.com/cloud/20200916142901.jpg" class="imgStyle">-->
    <div class="loginForm">
        <form>
            <div class="logoHead">
                <h2 style="margin-top: 15px">用户注册 XX银行</h2>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>ID:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="bankCode" class="layui-input adminInput"  type="number" name="bankCode"
                           placeholder="输入银行卡ID">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="password" class="layui-input adminInput" required type="password" name="password"
                           placeholder="输入密码">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>验证码:</label>
                </div>
                <div class="cardDiv">
                    <input id="loginCard" class="layui-input cardInput" type="text" name="card" placeholder="输入验证码">
                </div>
                <div class="codeDiv">
                    <input id="loginCode" class="layui-input codeInput" type="button">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="submitLabel">
                    <label>已有账号？<a href="/login.html" id="loginRegister">点击登录</a></label>
                </div>
                <div class="submitDiv">
                    <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary"
                           value="注册"></input>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="layui/layui.js" type="text/javascript"></script>
<script>
    layui.use(['layer'], function () {
        var layer = layui.layer;
    })
    $(function () {
        // 页面初始化生成验证码
        window.onload = createCode('#loginCode');
        // 验证码切换
        $('#loginCode').click(function () {
            createCode('#loginCode');
        });
        // 登陆事件
        $('#loginBtn').click(function () {
            login();
        });
        // 注册事件
        $('#loginRegister').click(function () {
            register();
        });
    });
    // 生成验证码
    function createCode(codeID) {
        var code = "";
        // 验证码长度
        var codeLength = 4;
        // 验证码dom元素
        var checkCode = $(codeID);
        // 验证码随机数
        var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
            'S','T','U','V','W','X','Y','Z'];
        for (var i = 0;i < codeLength; i++){
            // 随机数索引
            var index = Math.floor(Math.random()*36);
            code += random[index];
        }
        // 将生成的随机验证码赋值
        checkCode.val(code);
    }

    // 校验验证码、用户名、密码
    function validateCode(inputID, codeID) {
        var inputCode = $(inputID).val().toUpperCase();
        var cardCode = $(codeID).val();
        var bankCode = $('#bankCode').val();
        var password = $('#password').val();
        if ($.trim(bankCode) == '' || $.trim(bankCode).length <= 0) {
            layer.alert("用户名不能为空");
            return false;
        }
        if ($.trim(password) == '' || $.trim(password).length <= 0) {
            layer.alert("密码不能为空");
            return false;
        }
        if (inputCode.length <= 0) {
            layer.alert("验证码不能为空");
            return false;
        }
        if (inputCode != cardCode) {
            layer.alert("请输入正确验证码");
            return false;
        }
        return true;
    }

    // 登录流程
    function login() {
        if (!validateCode('#loginCard', '#loginCode')) {
            //阻断提示
        } else {
            var bankCode = $('#bankCode').val();
            var password = $('#password').val();
            var params = {};
            params.bankCode = bankCode;
            params.password = password;
            var loginLoadIndex = layer.load(2);
            $('#loginBtn').val("注册中...");
            $.ajax({
                type: 'post',
                url: 'user/register.do',
                dataType: 'json',
                // data: JSON.stringify(params),
                data:params,
                // contentType: 'application/json',
                success: function (data) {
                    if (data.code == 1) {
                        alert("注册成功,正在进入首页...");
                        window.location.href = "login.html";
                    } else {
                        alert(data.info);
                    }
                }
            });
        }

    }
</script>
</body>
</html>
